/* eslint-disable no-unused-vars */
import React, { useState } from 'react';
import { Upload, message, Button, Input, Form } from 'antd';
import { UploadOutlined, MinusCircleOutlined } from '@ant-design/icons';
import css from './index.scss';

export default (msg) => {
	const { info } = msg;
	const [data, setData] = useState(['']);
	const add = () => {
		const list = [...data];
		list.push('');
		setData(list);
		info.setFieldsValue({ count: data.length + 1 });
	};
	const remove = (index) => {
		console.log('index', index);
		const list = [...data];
		// 删除的时候清楚之前写的数据
		const clear = {};
		clear[`意见_${index + 1}`] = '';
		clear[`文件_${index + 1}`] = '';
		info.setFieldsValue(clear);
		list.splice(index, 1);
		setData(list);
		info.setFieldsValue({ count: data.length - 1 });
	};
	const props = {
		beforeUpload: () => {
			return false;
		},
		onChange(info) {
			if (info.file.status !== 'uploading') {
				console.log(info.file, info.fileList);
			}
			if (info.file.status === 'done') {
				message.success(`${info.file.name} file uploaded successfully`);
			} else if (info.file.status === 'error') {
				message.error(`${info.file.name} file upload failed.`);
			}
		},
	};
	return (
		<div>
			{data.map((item, index) => (
				<div key={`${index + 1}`}>
					<span>{`${index + 1}、`}</span>
					<Form.Item name={`意见_${index + 1}`} className={css.item}>
						<Input placeholder="整改问题" style={{ width: '280px' }} />
					</Form.Item>
					<Form.Item name={`文件_${index + 1}`} className={css.item} style={{ width: '130px' }}>
						<Upload {...props} maxCount={1}>
							<Button icon={<UploadOutlined />}>选择文件</Button>
						</Upload>
					</Form.Item>
					<MinusCircleOutlined onClick={() => remove(index)} style={{ margin: '15px 0' }} />
				</div>
			))}
			<Form.Item name="count" initialValue={data.length} />
			<Button type="dashed" onClick={add} className={css.button}>
				+ 添加整改项
			</Button>
			<br />
		</div>
	);
};
